<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            color: lightslategray;
        }

        hr {
            margin-bottom: 50px;
        }

        /*a 标签的伪类别属性*/
        .aclass a:link {
            color: blue;
        }

        .aclass a:visited {
            color: green;
        }

        .aclass a:hover {
            color: red;
        }

        /*    target 伪类*/

        #news:target {
            display: block;
        }

        #news:not(:target) {
            display: none;
        }

        /*元素状态伪类*/
        :disabled {
            color: red;
        }

        /**
        动态伪类用在其他元素上
         */
        strong:hover {
            background-color: rebeccapurple;
        }

        .input1:focus {
            color: red;
        }

        /**
        结构伪类 nth-child
        nthclass 子元素且是第二个  nthclass 元素
         */
        .nthclass:nth-child(2) {
            color: red;
        }

        /**
        注意和上面的区别，多了个空格，表示 子元素，下面表示  div下的，第2个子元素
         */
        .nthdiv :nth-child(2) {
            color: red;
        }

        /** 第三个p 元素会变，和  p:nth-child(3) 的区别 后者加入前两个元素有一个是 其他类型的比如div的，第三个也会变
        p:nth-type-of(3)，还有个 nth-last-type-of
         */

        /**
        伪元素 ::first-line  ::first-letter,
        不是所有的css属性都可以适用在伪元素上的
         */

        .words::first-letter{
            font-size: 50px;
        }

        .words::first-line{
            color:red
        }


        /**
        ::before,::after 用法
         */
        .beforeClass1::before{
            content: "11111";
            color: red;
        }

        .beforeClass1::after{
            content: '\e9e2';
            color:blue
        }
        /**
        加图片
         */
        .beforeClass2::before{
            content: url("../img/small.png");
            color: red;
        }

        .beforeClass2::after{
            content: "2222";
            width: 20px;
            height: 20px;
            color:blue
        }

    </style>
</head>
<body>

<h1>一,伪类</h1>

<h3>1, target 伪类 css 见顶部</h3>
<a href="#news">显示新闻</a>
<a href="">隐藏新闻</a>
<div id="news">这是新闻</div>


<h3>2,元素状态伪类(:enable,:disable,:checked) 伪类 css 见顶部 </h3>
<button>i am button</button>
<button disabled>i am button</button>

<h3>3,动态伪类</h3>
<p>（a:hover a:link等伪类） 如果这几个伪类都设置的话，必须按照 a:link,a:visited,a:hover,a:active的顺序 才行，<br>否则不生效
    （速记，女朋友看到LV后 ha ,ha 大笑） hover 和active 还可以用在其他元素上面 (样式 见顶部)
</p>
<strong>我是strong (移动鼠标到我这里) </strong>

<p>(3.1)动态伪类还有个:focus (焦点的意思，文本输入框就有)按tab 键 有选中的 都是可以获取焦点的 如果和上面四个元素<br>
    一款使用的话，focus 应该放在 hover 标签前面 （速记，女朋友看到LV后 （Feng）一样的ha,ha 大笑）</p>
<input class="input1" type="text" value="获取焦点颜色变红">

<p>(3.2)tab 键会foucs a 标签，如果我们想去掉a 的focus 话 应该设置其outline:none 样式(假装去掉选中，<br>实际上没去掉，
    下面的tableIndex=-1 才是真正的去掉选中)</p>
<a href="" style="outline: none">tab键没有边框 也可以通过伪类来设置 a:fouces{outline:none}</a><br>
<a href="" tabindex="-1" style="outline: none">设置tableindex=-1属性让a元素不能被选中 tableindex
    这个属性是调整选中顺序的
</a>

<h3>4,结构伪类</h3>
<p>4.1 :nth:child(1) 后面的数字表示选中第几个子元素 有子元素的都算包括body 元素下面的子元素</p>
<div>
    <p class="nthclass">文字内容1</p>
    <p class="nthclass">文字内容1</p>
    <p class="nthclass">文字内容1</p>
    <p class="nthclass">文字内容1</p>
</div>

<div class="nthdiv">
    <p class="nthclass">文字内容2</p>
    <p class="nthclass">文字内容2</p>
    <p class="nthclass">文字内容2</p>
    <p class="nthclass">文字内容2</p>

</div>
<p>4.2  nth-last-child(2) 倒着数的，倒数第二个</p>

<h3>5,否定伪类</h3>
<p>语法格式为 :not(x) x可以是，元素选择器，通用选择器，属性选择器，id选择器，伪类选择器<br>
可以链式写 :not(div):not(span){color:red}</p>
<hr>
<h3>5,伪元素，伪元素也是元素</h3>
<p>:first-line 伪元素前面可以写一个冒号也可以像下面一样写 两个冒号 ::firts-line 推荐第二种（为了和伪类区分）<br>
伪元素有以下四种， 前两个很少用后两个经常用<br>
    ::first-line 第一行<br>
    ::first-letter 第一个字母<br>
    ::before<br> 用来在一个元素的前面插入内容（可以是文字，图片）
    ::after<br> 用来在一个元素的后面插入内容（可以是文字，图片）

</p>
<div class="words" style="width: 400px;">
    30多年来，马明哲带领中国平安从无到有，从小到大，从仅有13名员工的单一财产险公司到中国三大综合金融集团之一。目前，中国平安在香港、上海两地上市，市值位居全球金融企业前20位、全球保险集团第3位。

    “不忘初心，砥砺前行”！马明哲在平安集团30周年司庆上说。他对于自己的定位是“平安创立100年时，时任CEO谈起历史时会说，我们最早的CEO叫马明哲，那家伙干得还不错”。

    2018年12月14日，平安宣布设立联席CEO集体决策机制，学者秦朔评价马明哲，其考虑的不会是某个具体的领导人，而是一种机制，通过机制筛选出能让平安利益最大化的领导人，或者领导人群体。在他看来，马明哲是一位用灵魂入股了平安、
    将企业家精神和职业经理人的专业素质完美融合在一起的商业领袖。
</div>

<h3>5.2,::befor,::after</h3>

<span class="beforeClass1">我是一个span</span> <br>
<span class="beforeClass2">加图片</span>

</body>
</html>